<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to Ruby Qt</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Qt, Ruby, programming, Linux, Introduction">
<meta name="description" content="This chapter is an introduction to Ruby Qt.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Ruby Qt</h1>

<p>
In this part of the Ruby Qt tutorial, we will introduce the Qt toolkit and
create our first programs using the Ruby programming language.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
The purpose of this tutorial is to get you started with the Qt toolkit with 
the Ruby language. Images used in this
tutorial can be downloaded <a href="/img/gui/qtruby/images.zip">here</a>. 
I used some icons from the
tango icons pack of the Gnome project. 
</p>

<h2>About</h2>

<p>
Qt is one of the leading toolkits for creating graphical user interfaces. 
Ruby is a popular scripting language. 
</p>

<h2>Creating a Tooltip</h2>

<p>
The first example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This code shows a tooltip on 
# a window.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012


require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "Tooltip"

        setToolTip "This is Qt::Widget"
        
        resize 250, 150
        move 300, 300

        show
    end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>


<pre class="explanation">
require 'Qt'
</pre>

<p>
The <code>require</code> keyword imports necessery types that we will 
use in the application. 
</p>

<pre class="explanation">
class QtApp &lt; Qt::Widget
</pre>

<p>
The example inherits from a <code>Qt::Widget</code>. 
The Widget class is the base class of all user interface objects. 
The widget is the atom of the user interface. It receives mouse, 
keyboard and other events from the window system.
</p>

<pre class="explanation">
setWindowTitle "Tooltip"
</pre>

<p>
This method call creates a title for the window. 
</p>

<pre class="explanation">
setToolTip "This is Qt::Widget"
</pre>

<p>
The <code>setToolTip</code> method creates a tooltip for the
Widget object. 
</p>

<pre class="explanation">
resize 250, 150
</pre>

<p>
Here we set the width and the height of the window. 
</p>

<pre class="explanation">
move 300, 300
</pre>

<p>
The <code>move</code> method moves the window on the
screen. 
</p>

<pre class="explanation">
show
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>

<pre class="explanation">
app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
These three lines set up the application. 
</p>

<img src="/img/gui/qtruby/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Centering a window</h2>

<p>
In the second example, we will center the window
on the screen. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program centers a window
# on the screen.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'

WIDTH = 250
HEIGHT = 150

class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "Center"
        resize WIDTH, HEIGHT
        
        center
        show
    end
    
    def center
        qdw = Qt::DesktopWidget.new

        screenWidth = qdw.width
        screenHeight = qdw.height

        x = (screenWidth - WIDTH) / 2
        y = (screenHeight - HEIGHT) / 2
        
        move x, y
    end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
The Qt toolkit does not have a single method
to center a window.
</p>


<pre class="explanation">
WIDTH = 250
HEIGHT = 150
</pre>

<p>
These two constants define the width and height of the
application window.
</p>

<pre class="explanation">
qdw = Qt::DesktopWidget.new
</pre>

<p>
The <code>Qt::DesktopWidget</code> class provides information about
the screen. 
</p>

<pre class="explanation">
screenWidth = qdw.width
screenHeight = qdw.height
</pre>

<p>
Here we determine the screen width and height. 
</p>

<pre class="explanation">
x = (screenWidth - WIDTH) / 2
y = (screenHeight - HEIGHT) / 2
</pre>

<p>
Here we calculate the x, y coordinates of the centered window. 
To center a window on the screen, we need to know the size of the
screen and the size of the window. 
</p>

<pre class="explanation">
move x, y
</pre>

<p>
We move the window to the computed x, y coordinates.
</p>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program creates a quit
# button. When we press the button,
# the application terminates. 
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012


require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "Quit button"
        
        init_ui
        
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui    
        quit = Qt::PushButton.new 'Quit', self
        quit.resize 80, 30
        quit.move 50, 50
        connect quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
The <code>Qt::PushButton</code> class shows a button in Ruby Qt.
It is a rectangular widget and usually shows a text label. 
</p>

<pre class="explanation">
init_ui
</pre>

<p>
We delegate the creation of the user interface to the 
<code>init_ui</code> method.
</p>

<pre class="explanation">
quit = Qt::PushButton.new 'Quit', self
</pre>

<p>
We create the button widget. The first parameter of the constructor is the label
which the button displays. The second parameter is the parent widget of the
button. 
</p>

<pre class="explanation">
quit.resize 80, 30
quit.move 50, 50
</pre>

<p>
We size and position the button widget. 
</p>

<pre class="explanation">
connect quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')
</pre>

<p>
The <code>clicked</code> signal is emitted, when we click on the quit button. 
The <code>connect</code> method connects a signal to a particular slot of an object. 
In our case it is the <code>quit</code> method of the application object. 
The <code>$qApp</code> is a global pointer to the application instance. 
</p>

<img src="/img/gui/qtruby/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>


<p>
This section was an introduction to the Qt toolkit with the Ruby language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 27, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

